<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="../js/mui.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			p {
				text-indent: 22px;
			}
			
			span.mui-icon {
				font-size: 14px;
				color: #007aff;
				margin-left: -15px;
				padding-right: 10px;
			}
			
			.mui-off-canvas-left {
				color: #fff;
			}
			
			.title {
				margin: 35px 15px 10px;
			}
			
			.title+.content {
				margin: 10px 15px 35px;
				color: #bbb;
				text-indent: 1em;
				font-size: 14px;
				line-height: 24px;
			}
			
			input {
				color: #000;
			}
			
			h5 {
				padding-top: 8px;
				padding-bottom: 8px;
				text-indent: 12px;
			}
			
			.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
				font-size: 15px;
				margin-top: 8px;
				color: #333;
			}
		</style>
	</head>

	<body>
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
			<!--侧滑菜单部分-->
			<aside id="offCanvasSide" class="mui-off-canvas-left">
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="title">侧滑导航</div>
						<div class="content">
							这是可拖动式侧滑菜单示例，你可以在这里放置任何内容；关闭侧滑菜单有多种方式： 1.在手机屏幕任意位置向左拖动(drag)；2.点击本侧滑菜单页之外的任意位置; 3.点击如下红色按钮
							<span class="android-only">；4.Android手机按back键；5.Android手机按menu键
							</span>。
							<p style="margin: 10px 15px;">
								<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>
							</p>

						</div>
						<div class="title" style="margin-bottom: 25px;">侧滑列表示例</div>
						<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									Item 1
								</a>
							</li>
						</ul>
					</div>
				</div>
			</aside>
			<!--主界面部分-->
			<div class="mui-inner-wrap">
				<header class="mui-bar mui-bar-nav">
					<a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
					<h1 class="mui-title">飞飙科技</h1>
				</header>
				<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="mui-content-padded">
							<div class="mui-content" style="background-color:#fff">
								<div id="slider" class="mui-slider">
									<div class="mui-slider-group mui-slider-loop">
										<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
										<div class="mui-slider-item mui-slider-item-duplicate">
											<a href="#">
												<img src="../images/yuantiao.jpg">
												<p class="mui-slider-title">静静看这世界</p>
											</a>
										</div>
										<div class="mui-slider-item">
											<a href="#">
												<img src="../images/shuijiao.jpg">
												<p class="mui-slider-title">幸福就是可以一起睡觉</p>
											</a>
										</div>
										<div class="mui-slider-item">
											<a href="#">
												<img src="../images/muwu.jpg">
												<p class="mui-slider-title">想要一间这样的木屋，静静的喝咖啡</p>
											</a>
										</div>
										<div class="mui-slider-item">
											<a href="#">
												<img src="../images/cbd.jpg">
												<p class="mui-slider-title">Color of SIP CBD</p>
											</a>
										</div>
										<div class="mui-slider-item">
											<a href="#">
												<img src="../images/yuantiao.jpg">
												<p class="mui-slider-title">静静看这世界</p>
											</a>
										</div>
										<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
										<div class="mui-slider-item mui-slider-item-duplicate">
											<a href="#">
												<img src="../images/shuijiao.jpg">
												<p class="mui-slider-title">幸福就是可以一起睡觉</p>
											</a>
										</div>
									</div>
									<div class="mui-slider-indicator mui-text-right">
										<div class="mui-indicator mui-active"></div>
										<div class="mui-indicator"></div>
										<div class="mui-indicator"></div>
										<div class="mui-indicator"></div>
									</div>
								</div>
								<ul class="mui-table-view mui-grid-view">
									<li class="mui-table-view-cell mui-media mui-col-xs-6">
										<a href="#">
											<img class="mui-media-object" src="../images/shuijiao.jpg">
											<div class="mui-media-body">幸福就是可以一起睡觉</div>
										</a>
									</li>
									<li class="mui-table-view-cell mui-media mui-col-xs-6">
										<a href="#">
											<img class="mui-media-object" src="../images/muwu.jpg">
											<div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div>
										</a>
									</li>
									<li class="mui-table-view-cell mui-media mui-col-xs-6">
										<a href="#"><img class="mui-media-object" src="../images/cbd.jpg">
											<div class="mui-media-body">Color of SIP CBD</div>
										</a>
									</li>
									<li class="mui-table-view-cell mui-media mui-col-xs-6">
										<a href="#">
											<img class="mui-media-object" src="../images/yuantiao.jpg">
											<div class="mui-media-body">静静看这世界</div>
										</a>
									</li>
								</ul>
							</div>

						</div>

					</div>
				</div>
				<!-- off-canvas backdrop -->
				<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>
		<script>
			mui.init();
			//侧滑容器父节点
			var offCanvasWrapper = mui('#offCanvasWrapper');
			//主界面容器
			var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
			//菜单容器
			var offCanvasSide = document.getElementById("offCanvasSide");
			if(!mui.os.android) {
				document.getElementById("move-togger").classList.remove('mui-hidden');
				var spans = document.querySelectorAll('.android-only');
				for(var i = 0, len = spans.length; i < len; i++) {
					spans[i].style.display = "none";
				}
			}
			//移动效果是否为整体移动
			var moveTogether = false;
			//侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
			var classList = offCanvasWrapper[0].classList;
			//主界面‘显示侧滑菜单’按钮的点击事件
			document.getElementById('offCanvasShow').addEventListener('tap', function() {
				offCanvasWrapper.offCanvas('show');
			});
			//菜单界面，‘关闭侧滑菜单’按钮的点击事件
			document.getElementById('offCanvasHide').addEventListener('tap', function() {
				offCanvasWrapper.offCanvas('close');
			});
			//主界面和侧滑菜单界面均支持区域滚动；
			mui('#offCanvasSideScroll').scroll();
			mui('#offCanvasContentScroll').scroll();
			//实现ios平台原生侧滑关闭页面；
			if(mui.os.plus && mui.os.ios) {
				mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
					plus.webview.currentWebview().setStyle({
						'popGesture': 'none'
					});
				});
			}
		</script>
	</body>

</html>